<template>
	<view class="notice-list">
		<view class="notice-content">
			<view class="notice-item" v-for="item in notice_list" :key="item.id" @click="goDetail(item)">
				<view class="notice-name-state">
					<view class="name-time">
						<text>{{item.userName}}</text>
						<text class="line"></text>
						<text class="time">{{handleTime(item.addTime)}}</text>
					</view>
					<text class="state" :style="{color: item.state==1?'#FF4F01':'#999'}">{{item.state==1?"未读":"已读"}}</text>
				</view>
				<view class="content">
					{{item.notice}}
				</view>
			</view>
		</view>
		<uni-load-more :status="load_more"></uni-load-more>
	</view>
</template>
<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
export default {
	components: {
		uniLoadMore,
	},
	data() {
		return {
			notice_list: [],
			page: 1,
			load_more: 'more'
		} 
	},
	onShow() {
		this.notice_list = []
		this.getGradeNotice()
	},
	onReachBottom(){
		if(this.load_more == 'no-more') return;
		this.page++;
		this.getGradeNotice()
	},
	methods: {
		getGradeNotice(){
			this.api.get('chatGroupManage/findGradeNotice', {
				gradeIds: JSON.stringify([2]),
				page: this.page,
				limit: 20
			}).then(res=>{
				if(res.data.state != 'ok') return;
				let data = res.data.notice;
				let totalPage = 0
				for (const key in data) {
					let page = data[key].totalPage
					totalPage = totalPage>page ? totalPage:page;
					if (data[key].list.length>0) {
						this.notice_list = this.notice_list.concat(data[key].list)
						
					}
				}
				if(this.page == totalPage){
					this.load_more = 'no-more';
				}
				// friendsMsgHandle(this, this.friend_list)
			})
		},
		handleTime(date){
			let t = new Date(date.split('-').join('/')).getTime()
			let str = this.utils.handleTs(t, 'his')
			str = str.split('-').join('/')
			return str
		},
		goDetail(item){
			uni.setStorageSync('notice_details', item)
			uni.navigateTo({
				url: '/pages/message/notice-details?logid='+item.logId
			})
		}
	}
}
</script>
<style lang="less" scoped>
	.notice-list{
		position: relative;
		min-height: 100vh;
		// #ifdef H5
		min-height: calc(100vh - 44px);
		// #endif
		background-color: #F9F9F9;
		&::after{
			position: absolute;
			left: 0;
			top: 0;
			content: '';
			width: 200%;
			height: 2rpx;
			background-color: #E5E5E5;
			transform: scale(0.5) translateX(-50%);
		}
	}
	.notice-content{
		background-color: #fff;
	}
	.notice-item{
		padding: 32rpx 0;
		margin: 0 36rpx;
		// border-bottom: 2rpx solid #E5E5E5;
		position: relative;
		&::after{
			position: absolute;
			left: 0;
			bottom: 0;
			content: '';
			width: 200%;
			height: 2rpx;
			background-color: #E5E5E5;
			transform: scale(0.5) translateX(-50%);
		}
		&:last-child{
			&::after{
				display: none;
			}
		}
	}
	.notice-name-state{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
	}
	
	.name-time{
		font-size: 26rpx;
		color: #999999;
		display: flex;
		align-items: center;
	}
	.line{
		margin: 0 16rpx;
		display: inline-block;
		height: 24rpx;
		width: 2rpx;
		background-color: #CCCCCC;
	}
	.state{
		font-size: 24rpx;
	}
	.content{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		white-space: pre-line;
		line-height: 42rpx;
		font-size: 30rpx;
		color: #333333;
	}
</style>